<template>
  <div class="chart-container">
    <div class="chart-header">
      <h3 class="chart-title">警情类型分析</h3>
      <div class="chart-tabs">
        <span 
          v-for="tab in tabs" 
          :key="tab.value"
          :class="['tab-item', { active: currentTab === tab.value }]"
          @click="currentTab = tab.value"
        >
          {{ tab.label }}
        </span>
      </div>
    </div>
    <div class="chart-content">
      <div class="chart-left">
        <div ref="pieChart" class="pie-chart"></div>
      </div>
      <div class="chart-right">
        <div class="legend-list">
          <div v-for="(item, index) in chartData" :key="index" class="legend-item">
            <div class="legend-marker" :style="{ background: item.color }"></div>
            <div class="legend-info">
              <span class="legend-name">{{ item.name }}</span>
              <span class="legend-value">{{ item.value }}起</span>
              <div class="legend-bar">
                <div class="bar-bg"></div>
                <div class="bar-value" :style="{ width: item.percentage + '%', background: item.color }"></div>
              </div>
              <span class="legend-percentage">{{ item.percentage }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'IncidentChart',
  data() {
    return {
      chart: null,
      currentTab: 'month',
      tabs: [
        { label: '本月', value: 'month' },
        { label: '本季', value: 'quarter' },
        { label: '本年', value: 'year' }
      ],
      chartData: [
        { name: '噪音扰民', value: 45, color: '#1890FF', percentage: 28.8 },
        { name: '邻里纠纷', value: 38, color: '#2FC25B', percentage: 24.4 },
        { name: '消防隐患', value: 25, color: '#FACC14', percentage: 16.0 },
        { name: '治安隐患', value: 22, color: '#223273', percentage: 14.1 },
        { name: '车辆违停', value: 18, color: '#8543E0', percentage: 11.5 },
        { name: '其他事件', value: 8, color: '#13C2C2', percentage: 5.2 }
      ]
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart && this.chart.dispose()
  },
  methods: {
    initChart() {
      if (!this.$refs.pieChart) return
      
      this.chart = echarts.init(this.$refs.pieChart)
      this.updateChart()
    },
    updateChart() {
      if (!this.chart) return

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}起 ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: this.chartData.map(item => ({
              value: item.value,
              name: item.name,
              itemStyle: {
                color: item.color
              }
            })),
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}',
              color: '#7eb9ff',
              fontSize: 12,
              lineHeight: 14,
              padding: [0, 0, 0, 10],
              alignTo: 'edge',
              edgeDistance: '5%',
              distanceToLabelLine: 5
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 10,
              lineStyle: {
                color: 'rgba(126, 185, 255, 0.3)'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 13,
                color: '#00c6ff'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(0, 198, 255, 0.5)'
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      
      this.chart.setOption(option)
    },
    handleResize() {
      this.chart && this.chart.resize()
    }
  },
  watch: {
    currentTab() {
      // 在这里可以根据 tab 切换加载不同时间段的数据
      this.updateChart()
    }
  }
}
</script>

<style scoped>
.chart-container {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  padding: 12px;
  height: 280px;
  overflow: hidden;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.chart-title {
  color: #00c6ff;
  font-size: 16px;
  margin: 0;
}

.chart-tabs {
  display: flex;
  gap: 10px;
}

.tab-item {
  color: #7eb9ff;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 10px;
  transition: all 0.3s;
}

.tab-item:hover {
  background: rgba(0, 198, 255, 0.1);
}

.tab-item.active {
  background: rgba(0, 198, 255, 0.2);
  color: #00c6ff;
}

.chart-content {
  display: flex;
  height: calc(100% - 40px);
  gap: 15px;
}

.chart-left {
  width: 60%;
  height: 100%;
}

.pie-chart {
  width: 100%;
  height: 100%;
}

.chart-right {
  width: 40%;
  padding-left: 15px;
  border-left: 1px solid rgba(0, 198, 255, 0.1);
  overflow-y: auto;
  padding-right: 5px;
}

.chart-right::-webkit-scrollbar {
  width: 4px;
}

.chart-right::-webkit-scrollbar-track {
  background: rgba(0, 198, 255, 0.05);
  border-radius: 2px;
}

.chart-right::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 255, 0.2);
  border-radius: 2px;
}

.chart-right::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 198, 255, 0.3);
}

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 5px;
}

.legend-item {
  display: flex;
  gap: 8px;
}

.legend-marker {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-top: 6px;
}

.legend-info {
  flex: 1;
}

.legend-name {
  display: block;
  color: #7eb9ff;
  font-size: 13px;
  margin-bottom: 3px;
}

.legend-value {
  color: #00c6ff;
  font-size: 15px;
  font-weight: 500;
  font-family: DIN;
}

.legend-bar {
  height: 3px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 2px;
  margin: 5px 0;
  overflow: hidden;
}

.bar-value {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.legend-percentage {
  color: #7eb9ff;
  font-size: 12px;
  float: right;
  margin-top: -18px;
}
</style> 